<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <style type="text/css">
	.layui-input{
		width: 300px;
	}
</style>
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#"><a href=".">首页</a></a>
      </p>
      <div class="sn-quick-menu">
        <div class="login"><a href="login.html">登录</a></div>
        <div class="sp-cart"><a href="shopcart.html">购物车</a></div>
        <div class="address"><a href="address.html">个人收货地址</a></div>
        <div class="myorders"><a href="myorders.html">所有订单</a></div>
        <div class="users"><a href="users.html">个人信息</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="潮流男鞋">
            <img src="/file/logo.jpg">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate  lay-filter="user">
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base shopcart-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity.html" class="active">所有商品</a>
            <a href="buytoday.html">今日团购</a>
             <!-- <a href="information.html">母婴资讯</a> -->
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    
    
    <table id="demo" lay-filter="test"></table>
		

 
		<script>
		layui.use(['table','jquery'], function(){
		  var table = layui.table;
		  var $ = layui.jquery;
		  
		  var defaultAddressId = 0;//默认收货地址id
		  
		  $.post(
				 "../users/getDefaultAddress.do?id=1"//1是模拟的登录用户
				,function(res){
					 console.log(res)
					defaultAddressId = res;
				 }
		  )
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,url: '../../address/findByUId.do?uid=1' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'id', title: 'ID'}
		      ,{field: '', title: '收货地址',templet:function(d){return d.province+d.city+d.detail}}
		      ,{field: 'name', title: '收货人'}
		      ,{field: 'phone', title: '手机号'} 
		      ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
		    ]],
		    //默认收到收货地址高亮显示
		    done:function(res,curr,count){
		    	//console.log(res.data)
		    	//$('tr').css({'background-color': '#009688', 'color': '#fff'});//表头样式修改
		    	var that = this.elem.next();
	            //console.log(this.elem)
	            //console.log(that)
	            for(var i = 0;i<count;i++){
	            	if(res.data[i].id==defaultAddressId)
	            	{
	            		var tr = that.find(".layui-table-box tbody tr[data-index='" + i + "']");
	            		//console.log(tr)
	            		tr.css("background-color", "yellow");
	            	}
	            }
		    }
		  });
		  
		//工具条事件
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		   
		    if(layEvent === 'default'){ //设为默认收货地址
		      //do somehing
		      $.post(
		    		"../users/setDefaultAddress.do",
		    		{
		    			addressId:data.id//地址id
		    			,id:1//登录用户id，这里模拟1，后面要从sessionStorage里获取登录用户的id
		    		},function(res){
		    			layer.msg("已设为默认收货地址");
		    			//刷新页面
		    			location.reload();
		    		}
		      );
		      
		    } else if(layEvent === 'del'){ //删除
		      layer.confirm('真的删除行么', function(index){
		        
		        //向服务端发送删除指令
		        $.post(
		        	"../../address/del.do?id="+data.id,
		        	function(res){
		        		if(res>0){
		        			obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					        layer.close(index);
		        		}else{
		        			layer.msg("默认收货地址不能删除")
		        		}
		        		
		        	}
		        );
		      });
		    } else if(layEvent === 'edit'){ //编辑
		      //do something
		      
		      //同步更新缓存对应的值
		      obj.update({
		        username: '123'
		        ,title: 'xxx'
		      });
		    } else if(layEvent === 'LAYTABLE_TIPS'){
		      layer.alert('Hi，头部工具栏扩展的右侧图标。');
		    }
		  });
		  
		});
		
		
		
		</script>
		
		<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="default">默认</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
  </div>
</body>
</html>